import { Meta, ArgTypes } from "@storybook/blocks";
import { ThemeProvider } from "@appsmith/wds-theming";

<Meta title="WDS/Theme/Theme" component={ThemeProvider} />

# Theme

The theme package substitutes hooks and components for working with theming.

## ThemeProvider

This page describes how to use ThemeProvider. How to access tokens, what input parameters are needed and how to change the color mode.

The ThemeProvider is React component in that allows for the easy
implementation of themes within an app. With ThemeProvider, you can define a
set of design tokens that will be applied to specific components in your
application, allowing for consistent styling across your entire application.

export const Template = () => <ThemeProvider theme={{}} />;

<ArgTypes of={ThemeProvider} />

## useTheme

A hook that helps dynamically update tokens depending on incoming parameters.

```javascript
import { ThemeProvider, useTheme } from "@appsmith/wds-theming";

const { theme } = useTheme({
  seedColor,
  colorMode,
  borderRadius,
  fontFamily,
  rootUnitRatio,
});

return <ThemeProvider theme={theme}>...</ThemeProvider>;
```

## tokensAccessor

Creates an object containing tokens based on the passed parameters (see the `defaultToken` structure) for subsequent conversion to CSS variables.

## defaultTokens

Basic token configuration file.

## Usage

```javascript
import React from "react";
import { useEffect, useState } from "react";
import {
  ThemeProvider,
  TokensAccessor,
  defaultTokens,
  useFluidTokens,
} from "@appsmith/wds-theming";

export const theming = (Story, args) => {
  const { fluid, ...restDefaultTokens } = defaultTokens;
  const { typography, spacing, sizing } = useFluidTokens(fluid);
  const tokensAccessor = new TokensAccessor({
    ...restDefaultTokens,
    rootUnit,
    spacing,
    sizing,
    typography,
  });
  const [theme, setTheme] = useState(tokensAccessor.getAllTokens());

  useEffect(() => {
    if (args.globals.colorMode) {
      tokensAccessor.updateColorMode(args.globals.colorMode);

      setTheme((prevState) => {
        return {
          ...prevState,
          ...tokensAccessor.getColors(),
        };
      });
    }
  }, [args.globals.colorMode]);

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};
```
